<template>
  <el-dialog :visible.sync="isShow" v-if="isShow" title="白名单设置" width="50%" :before-close="handleClose" top="100px" :close-on-click-modal="false">
    <div class="border-box">
      <el-form ref="ruleForm" :model="formParams" :rules="ruleForm" label-width="0">
        <div class="flex item-box" v-for="(item,index) in itemData" :key="index">
          <div class="title width25">
            <span v-show="item.key=='admin_id' && activeType">{{ item.label }}</span>
            <span v-show="item.key=='real_ip' && !activeType">{{ item.label }}</span>
          </div>
          <div class="content width80">
            <el-form-item class="item-clear" v-show="item.key=='admin_id' && activeType" label="" prop="admin_id">
              <el-select v-model="formParams.admin_id" clearable filterable placeholder="请选择白名单账号" style="width: 40%">
                <el-option :label="'【' + item.id + '】' + item.nick_name" :value="item.id" v-for="(item, index) in accountDataList" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='real_ip' && !activeType" label="" prop="real_ip">
              <el-input class="width40" type="text" v-model="formParams.real_ip" placeholder="请输入白名单IP"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addWhitelistIp,
  editWhitelistIp,
  addWhitelistAccount,
  editWhitelistAccount
} from '@/api/whitelist'
import {
  getShowUserAgent
} from '@/api/user'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    //false为IP true为账号
    activeType: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
  },
  data () {
    return {
      isShow: false,
      itemData:[
        { label: '白名单账号', key: 'admin_id' },
        { label: '白名单IP', key: 'real_ip' },
      ],
      formParams: {
        real_ip: '',
        admin_id: null,
      },
      ruleForm: {},
      accountDataList: []
    }
  },
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data))
      } else {
        that.formParams = {
          real_ip: '',
          admin_id: null,
        }
      }
      if (!that.activeType) {
        that.ruleForm = {
          real_ip: [{ required: true, trigger: 'blur', message: '请输入白名单IP', }]
        }
      } else {
        that.ruleForm = {
          admin_id: [{ required: true, trigger: 'blur', message: '请选择白名单账号', }]
        }
      }
    },
  },
  created () {
    this.getWhitelistAccountList()
  },
  methods: {
    // 获取所有的账号
    getWhitelistAccountList () {
      let that = this;
      that.accountDataList = [];
      getShowUserAgent({
        is_central: that.formParams.is_central
      }).then(function (res) {
        if (res.data) {
          that.accountDataList = res.data
        }
      }).catch((error) => {
        that.$message.error(error.msg)
      })
    },
    // 确认
    handleConfirm (formvalue) {
      let that = this, params = JSON.parse(JSON.stringify(that.formParams));
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          if (!that.activeType) {
            // 新增白名单IP
            if (!params.id) {
              addWhitelistIp({
                operated_id: that.$store.getters.userInfo.operated_id,
                real_ip: params.real_ip,
                is_central: params.is_central
              }).then(function (res) {
                that.$message.success(res.msg)
                that.$emit('onHideDetails', true)
              }).catch((error) => {
                that.$message.error(error.msg)
              })
            } else {
              editWhitelistIp({
                id: params.id,
                operated_id: that.$store.getters.userInfo.operated_id,
                real_ip: params.real_ip,
              }).then(function (res) {
                that.$message.success(res.msg)
                that.$emit('onHideDetails', true)
              }).catch((error) => {
                that.$message.error(error.msg)
              })
            }
          } else {
            // 新增白名单账号
            if (!params.id) {
              addWhitelistAccount({
                operated_id: that.$store.getters.userInfo.operated_id,
                admin_id: params.admin_id,
                is_central: params.is_central
              }).then(function (res) {
                that.$message.success(res.msg)
                that.$emit('onHideDetails', true)
              }).catch((error) => {
                that.$message.error(error.msg)
              })
            } else {
              editWhitelistAccount({
                id: params.id,
                operated_id: that.$store.getters.userInfo.operated_id,
                admin_id: params.admin_id,
              }).then(function (res) {
                that.$message.success(res.msg)
                that.$emit('onHideDetails', true)
              }).catch((error) => {
                that.$message.error(error.msg)
              })
            }
          }
        } else {
          return false;
        }
      });
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
.prooItem {
  width: 30%;
  margin: 10px;
}
</style>
